<template>
  <div v-loading="fullscreenLoading" class="sqlDocument">
    <div class="sqlDocumentHead">
      <div style="width: 30%">
        <el-input v-model="sqlKeyword" placeholder="表名/备注" class="input-with-select" @keyup.native="goSearch" @keydown.native.enter="search">
          <el-button slot="append" icon="el-icon-search" @click="search" />
        </el-input>
      </div>
      <el-button type="primary" style="width: 250px" @click="exportSqlDoc">导出SQL文档</el-button>
    </div>
    <div>
      <template>
        <el-table
          :data="sqlTableList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="id"
            label="编号"
            width="80"
          />
          <el-table-column
            prop="tableName"
            label="表名"
            width="180"
          />
          <el-table-column
            prop="tableType"
            label="表类型"
            width="120"
          />
          <el-table-column
            prop="engine"
            label="数据库引擎"
            width="120"
          />
          <el-table-column
            prop="rowFormat"
            label="行格式"
            width="120"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          />
          <el-table-column
            prop="encode"
            label="字符编码"
            width="120"
          />
          <el-table-column
            prop="collation"
            label="排序规则"
            width="120"
          />
          <el-table-column
            prop="tableComment"
            label="注释/备注"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row.columnsViewList)">查看表结构</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-dialog
      title="表结构"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div>
        <template>
          <el-table
            :data="columnsViewList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="columnName"
              label="列名"
              width="180"
              align="center"
            />
            <el-table-column
              prop="dataType"
              label="数据类型"
              width="120"
              align="center"
            />
            <el-table-column
              prop="maxLength"
              label="长度"
              width="120"
              align="center"
            />
            <el-table-column
              prop="decimalPoint"
              label="小数点"
              width="120"
              align="center"
            />
            <el-table-column
              label="不是null"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <el-checkbox :value="scope.row.isNullable === 'NO'" />
              </template>
            </el-table-column>
            <el-table-column
              label="虚拟"
              width="120"
              align="center"
            >
              <template>
                <el-checkbox :value="false" />
              </template>
            </el-table-column>
            <el-table-column
              label="主键"
              width="120"
            >
              <template slot-scope="scope">
                <svg
                  v-if="scope.row.columnKey === 'PRI'"
                  x="1641379282648"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="25"
                  height="25"
                ><path d="M578.364989 912.411529l86.306668-89.884147-81.979107-85.374436v-28.350698l81.542155-86.708827-80.265068-85.362157c94.92393-31.249725 163.670663-122.583896 163.670663-230.440369 0-133.651976-105.497753-242.016009-235.640812-242.016009S276.357654 172.637896 276.357654 306.290895c0 108.364033 69.357648 200.065572 164.948772 230.90188v350.320691c0 39.856753 31.03176 72.211649 69.312622 72.211648h2.759857c29.859052-0.001023 55.228859-19.699668 64.986084-47.313585zM417.742754 306.290895c0-53.480029 42.204218-96.809883 94.256734-96.809883s94.256734 43.330878 94.256734 96.809883c0 53.456492-42.204218 96.788393-94.256734 96.788393s-94.256734-43.331901-94.256734-96.788393z m0 0" fill="#FFA200" /></svg>
              </template>
            </el-table-column>
            <el-table-column
              prop="columnDefault"
              label="默认值"
              width="120"
              align="center"
            />
            <el-table-column
              prop="columnComment"
              label="注释/备注"
              align="center"
            />
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTablesViewList } from '@/api/api'
import { formatDate } from '@/utils/dateUtil'
import { exportDocx } from '@/utils/docUtil'
import StringUtils from '@/utils/error/StringUtils'

export default {
  name: 'Index',
  data() {
    return {
      sqlKeyword: '',
      dialogVisible: false,
      status: true,
      fullscreenLoading: true,
      sqlTableList: [],
      sqlTableListBack: [],
      columnsViewList: [],
      multipleSelection: []
    }
  },
  mounted() {
    this.getTablesViewList()
  },
  methods: {
    getTablesViewList() {
      getTablesViewList().then((res) => {
        const { code, data } = res.data
        this.fullscreenLoading = false
        if (code === 0) {
          this.sqlTableList = data
          this.sqlTableListBack = data
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(columnsViewList) {
      this.dialogVisible = true
      this.columnsViewList = columnsViewList
    },
    exportSqlDoc() {
      const date = new Date()
      const dt = formatDate(date, 'yyyyMMddhhmmss')
      let list = []
      if (!StringUtils.isEmptyArray(this.multipleSelection)) {
        list = this.multipleSelection
      } else {
        list = this.sqlTableList
      }
      exportDocx('./sql.docx', { list }, `swagger_sql_${dt}.docx`)
      this.$message.success('操作成功')
    },
    // 节流函数
    goSearch() {
      // 保持this的指向始终指向vue实例
      const that = this
      if (!that.status) {
        return
      }
      that.status = false
      setTimeout(function() {
        that.search() // 调用写好的方法
        that.status = true
      }, 1000)
    },
    search() {
      this.sqlTableList = []
      // 判断展示列表，如果输入了就展示没输入就不展示
      if (this.sqlKeyword.length === 0) {
        this.sqlTableList = JSON.parse(JSON.stringify(this.sqlTableListBack))
        return
      }
      this.sqlTableListBack.forEach(table => {
        const { tableName, tableComment } = table
        if (tableName.indexOf(this.sqlKeyword) !== -1 || tableComment.indexOf(this.sqlKeyword) !== -1) {
          this.sqlTableList.push(table)
        }
      })
    }
  }
}
</script>

<style scoped>
.sqlDocumentHead {
  display: flex;
  flex-direction: row;
}
</style>
